<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>仪表盘</title>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
	<script src="reconnecting-websocket.min.js"></script>
	<script src="https://cdn.bootcss.com/echarts/3.5.3/echarts.js"></script>
	<script src="https://cdn.bootcss.com/echarts/3.5.3/echarts.common.js"></script>
    <style>
        #chart-panel {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            padding: 10px 10px 20px 10px;
        }
    </style>
</head>
<body>
	<div id="chart-panel"></div>
<script>
	var myChart = echarts.init(document.getElementById('chart-panel'));

	var locatoins = ['30%', '70%'];

	option = {
		backgroundColor: '#394056',
		title: [{
			name: 'opportunity_changed',
			text: '0',
			subtext: '个商机未处理',
			x: locatoins[0],
			y: 'center',
			textAlign: 'center',
			textStyle: {
				fontWeight: 'normal',
				fontSize: 80,
				color: '#ee2233'
			},
			subtextStyle: {
				fontWeight: 'normal',
				fontSize: 20
			}
		},{
			name: 'sale_order_line_change_changed',
			text: '0',
			subtext: '种产品未采购',
			x: locatoins[1],
			y: 'center',
			textAlign: 'center',
			textStyle: {
				fontWeight: 'normal',
				fontSize: 80,
				color: '#ee2233'
			},
			subtextStyle: {
				fontWeight: 'normal',
				fontSize: 20
			}
		}],
		tooltip: {
			//show: true,
			trigger: 'item',
			formatter: "{b}: {c} ({d}%)"
		},
		legend: [{
			name: 'opportunity_changed',
			orient: 'vertical',
			top: '0%',
			left: 0,
			data: [],
			textStyle: {
						color: '#ddd',
						fontSize: 20
					},
		},{
			name: 'sale_order_line_change_changed',
			orient: 'vertical',
			top: '0%',
			right: 0,
			data: [],
			textStyle: {
						color: '#ddd',
						fontSize: 20
					},
		}
		],
		series: [{
			name: 'opportunity_changed',
			type: 'pie',
			selectedMode: 'single',
			center: [locatoins[0], '50%'],
			radius: ['30%', '65%'],
			color: ['#86D560', '#AF89D6', '#59ADF3', '#FF999A', '#FFCC67'],

			// label: {
// 		            normal: {
// 		                position: 'inner',
// 		                formatter: '{d}%',
//
// 		                textStyle: {
// 		                    color: '#fff',
// 		                    fontWeight: 'bold',
// 		                    fontSize: 14
// 		                }
// 		            }
// 		        },
			labelLine: {
				normal: {
					show: true
				}
			},
			data: []
		},
		{
			name: 'sale_order_line_change_changed',
			type: 'pie',
			selectedMode: 'single',
			center: [locatoins[1], '50%'],
			radius: ['30%', '65%'],
			color: ['#86D560', '#AF89D6', '#59ADF3', '#FF999A', '#FFCC67'],

			// label: {
			//     normal: {
			//         position: 'inner',
			//         formatter: '{d}%',
			//
			//         textStyle: {
			//             color: '#fff',
			//             fontWeight: 'bold',
			//             fontSize: 14
			//         }
			//     }
			// },
			labelLine: {
				normal: {
					show: true
				}
			},
			data: []
		}]
	};
	myChart.setOption(option);


	var refresh_data = function(data, name){
		var null_index = 0;
		var tips = 0;
		var legend_data = [];
		for (var i = 0; i < data.length; i ++){
			if (data[i].name == null){
				null_index = i;
				tips = data[i].value;
			}
			else{
				legend_data.push(data[i].name);
			}
		}
		data.splice(null_index, 1);
		myChart.setOption({
			title: [{'name': name, 'text': tips}],
			legend: [{'name': name, 'data': legend_data}],
			series: [{'name': name, 'data': data}]
		})
	};

	//var socket = io.connect('http://localhost:8899');

//function ws_connect(url) {
//    return new Promise(function(resolve, reject) {
//        var createSocket = function(){
//			var server = new WebSocket(url);
//			server.onopen = function() {
//			    server.send("get data");
//				resolve(server);
//			};
//            server.onmessage = function(evt) {
//                var data = JSON.parse(evt.data);
//                for(var key in data){
//                    refresh_data(data[key], key);
//                }
//            };
//			var reconnect = function(err) {
//				//reject(err);
//				setTimeout(function(){
//				    if (server.readyState == 1) {
//				        server.send("get data");
//                    }
//                    else{
//				        createSocket();
//                    }
//				}, 2000)
//			};
//			//server.onerror = reconnect;
//			server.onclose = reconnect;
//		};
//        createSocket();
//
//    });
//}

var url = 'ws://localhost:8899';
if (window.location.href.indexOf('localhost') < 0){
    url = 'ws://crm.800890.com:8899';
}

var socket = new ReconnectingWebSocket(url, null, {debug: true, reconnectInterval: 3000, maxReconnectInterval: 99999999999});

socket.onopen = function() {
    socket.send("get data");
};
socket.onmessage = function(evt) {
    var data = JSON.parse(evt.data);
    for(var key in data){
        refresh_data(data[key], key);
    }
};
//	var get_websocket = function(){
//	    console.log(window.location.href.indexOf('location'));
//		return new WebSocket("ws://localhost:8899");
//    };
//
//	var ws = get_websocket();
//	setTimeout(function () {
//			if (ws.readyState != 1) {
//				alert("Problem connection , kindly contact system admin .");
//			}
//	}, 1000);
//
//	ws.onerror = function(event){
//    	console.log("Error");
//	}
//	ws.onopen = function(evt) {
//	  console.log("Connection open ...");
//	  ws.send("Hello WebSockets!");
//	};
//
//	ws.onmessage = function(evt) {
//	  console.log( "Received Message: " + evt.data);
//	  //ws.close();
//	};
//
//	ws.onclose = function(evt) {
//	  console.log("Connection closed.");
//	  window.setTimeout(function(){
//		  ws = get_websocket();
//	  }, 1000);
//	};

	// 连接
//	    socket.on('connected', function (data) {
//			for(var key in data){
//				refresh_data(data[key], key);
//			}
//	        socket.emit('ready for data', {});
//	    });
//
//		//数据变化事件
//	    socket.on('opportunity_changed', function (data_string) {
//			var data = JSON.parse(data_string);
//			refresh_data(data, 'opportunity_changed');
//	    });
//	    socket.on('sale_order_line_change_changed_changed', function (data_string) {
//			var data = JSON.parse(data_string);
//			refresh_data(data, 'sale_order_line_change_changed');
//	    });
</script>
</body>
</html>